<template>
    <dir>
        <van-dropdown-menu>
            <van-dropdown-item title="西安出发" />
            <van-dropdown-item title="出发日期">

                <div>
                    <van-button plain type="info">不限</van-button>
                    <van-button plain type="info">春节</van-button>
                </div>
                <div>
                    <van-button plain type="info" style="width: 100%;">自定义最早/最晚出发日期</van-button>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <van-button plain type="info" style="margin:10px; line-height: 100px; ">清除</van-button>
                    <van-button color="#00BCD4" style="margin:10px; line-height: 100px; ">确定</van-button>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="行乘天数" ref="item">
                <div class="travelQuality">
                    <span style="font-size:10px">行乘天数（多选）</span>
                    <div>
                        <van-button plain type="info" style="transform: scale(0.7);">不限</van-button>
                        <van-button plain type="info" style="transform: scale(0.7);" v-for="(item, index) in 11"
                            :key="index">{{ item }}天</van-button>

                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <van-button plain type="info" style="margin:10px; line-height: 100px; ">清除</van-button>
                        <van-button color="#00BCD4" style="margin:10px; line-height: 100px; ">确定</van-button>
                    </div>
                </div>


            </van-dropdown-item>


            <van-dropdown-item v-model="value2" :options="option2" title="主题" />
        </van-dropdown-menu>
    </dir>
</template>

<script>
export default {
    data() {
        return {
            value2: 'a',
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],

        };
    },

}
</script>

<style scoped lang="scss">
.travelQuality {
    padding: 10px;
}

.travelQuality2 {
    padding: 10px;

    .title {
        padding: 10px;
    }

    input {
        width: 150px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0 10px;
    }
}

.titles {
    font-size: 10px;
}
</style>